<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
       onclick="goMenuAdd()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true"
       onclick="doMenuDel()">删除</a>
</div>
<ul id="menuList" class="easyui-tree"></ul>
<div id="edit-menu-dialog" class="easyui-dialog" modal="true" resizable="true" modal="true;" title="选择菜单"
     closed="true" href="<%=request.getContextPath()%>/menu_edit.jsp" style="width:500px;height:300px;" buttons="#dlg-menu-buttons">
</div>
<div id="dlg-menu-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitMenuForm()">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#menuForm').form('reset')">重填</a>
</div>
<script type="text/javascript">
    var menuTree;
    $(function () {
        menuTree = $('#menuList').tree({
            url: "<%=request.getContextPath()%>/menu.html?act=tree",		//远程加载tree数据的url路径
            animate: true, 				//是否开启动画效果
            checkbox: true, 				//是否显示复选框
            cascadeCheck: false,
            onClick: function (node) {
                $("#edit-menu-dialog").dialog({
                    onLoad: function () {
                        $('#menuForm').form('load', {
                            text: node.text,
                            id: node.id,
                            url: node.attributes.url,
                            parentId: node.attributes.parentId
                        });
                        $("#parentId").combotree({
                            onLoadSuccess: function (data) {
                                $("#parentId").combotree("setValue", node.attributes.parentId);
                            }
                        });
                    }
                })
                $("#edit-menu-dialog").dialog("open");
            },
            onLoadSuccess: function (node, data) {
                //列表中不显示根节点
                var root = $(this).tree("find", 1);
                $(this).tree('remove', root.target);
            }
        });
    });

    function submitMenuForm() {
        $('#menuForm').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    $.ajax({
                        url: "<%=request.getContextPath()%>/menu.html?act=edit",
                        data: $('#menuForm').serialize(),
                        method: "post",
                        success: function (data) {
                            if (data.status) {
                                $("#edit-menu-dialog").dialog("close");
                                menuTree.tree('reload');//刷新菜单列表
                                //刷新表单中父菜单列表
                                $("#parentId").combotree("tree").tree('reload');
                            } else {
                                alert(data.message);
                            }

                        }
                    })
                }
                return false;
            }
        });
    }

    function goMenuAdd() {
        $('#menuForm').form('clear');
        $("#edit-menu-dialog").dialog("open");
    }

    function doMenuDel() {
        if (!confirm("确定要删除吗？")) {
            return;
        }
        var menuIds = new Array();
        //将已选中的节点id封装到数组中
        $(menuTree.tree("getChecked")).each(function (i, node) {
            menuIds[i] = node["id"];
        });
        $.ajax({
            url: '/menu.html?act=delete',
            type: 'POST',
            data: {ids: menuIds.join(",")},
            cache: false,
            success: function (json) {
                if (json.status) {
                    menuTree.tree('reload');//刷新列表
                    $("#parentId").combotree("tree").tree('reload');
                } else {
                    alert(json.message);
                }
            }
        });
        return false;
    }
</script>
